<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="text_center mintop40 minbottom40">
			<image src="@/static/image/40.png" mode="" style="width: 180rpx;height: 180rpx;"></image>
		</view>
		<view class="min40 row">
			<view class="column">
				<view class="col0 size36 font600">
					欢迎登陆
				</view>
				<view class="size28 col0 font500 row mintop20">
					还没有账号，
					<view style="color: #FE9110;" @click="$jump.nav('/mypackage/user/register?usercode=' + usercode)">
						去注册
					</view>
				</view>
			</view>
			<view class="minauto minright0 rad3 row" style="padding: 20rpx 40rpx;background-color: #f6f6f6;"
				@click="show = true">
				<view class="size28 col3 font500 minright10">
					{{ classify }}
				</view>
				<u-icon name="arrow-down-fill" color="#FF986B" size="15"></u-icon>
			</view>
		</view>
		<view class="min40_rl">
			<view class="u-demo-block__content" style="margin-top: 15px;">
				<u--input placeholder="请输入手机号" type="number" customStyle="background: #F6F6F6;border: #F6F6F6;"
					shape="circle" maxlength="11" v-model="phone">
				</u--input>
			</view>
			<view class="mintop40">
				<u--input placeholder="请输入密码" customStyle="background: #F6F6F6;border: #F6F6F6;" type="password"
					shape="circle" v-model="password"></u--input>
			</view>
			<view style="margin-top: 80rpx;">
				<u-button text="登陆" shape="circle" color="linear-gradient( 63deg, #FF818A 0%, #FF9F6F 100%)"
					customStyle="color: #333;font-weight: 600;letter-spacing: 5px;" hairline="false" size="normal"
					@click="handleinput"></u-button>
			</view>
		</view>
		<view class="text_center mintop40 agree size22 row align_item_c just_cont_c" @click="agree = !agree">
			<uni-icons v-if="agree" type="circle-filled" color="#FD5401" size="20"></uni-icons>
			<uni-icons v-else type="circle" color="#FD5401" size="20"></uni-icons>
			<text>我已阅读并同意</text>
			<text style="color:#FD5401;"
				@click="$jump.nav('/indexpackage/web/protocol?type=' + 'user_agreement')">《用户协议》</text>
			与
			<text style="color:#FD5401;"
				@click="$jump.nav('/indexpackage/web/protocol?type=' + 'privacy_policy')">《隐私政策》</text>
		</view>
		<!-- 第三方登录 -->
		<view class="col3 size30 font500 text_center mintop40">
			手机号一键登录/注册
		</view>
		<view class="">
			<button class="WeChat_image" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<image style="width: 34px; height: 34px;" src="@/static/image/login-arrow.png" mode="aspectFit"></image>
			</button>
		</view>
		<!-- 第三方登录 -->
		<!-- 登录种类 -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		<!-- 登录种类 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				usercode: '',
				phone: '',
				password: '',
				columns: [
					['用户登录', '门店登录', '业务员登录']
				],
				show: false,
				classify: '用户登录',
				type: 1
			}
		},

		onLoad(op) {
			this.usercode = op.memberid
		},
		methods: {
			confirm(e) {
				this.classify = e.value[0]
				this.show = false
				if (this.classify == '用户登录') {
					this.type = 1
				} else if (this.classify == '门店登录') {
					this.type = 2
				} else {
					this.type = 3
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getlo() {
				var Logincode = ''
				var _this = this
				uni.login({
					success(rs) {
						Logincode = rs.code
						_this.getLogin(Logincode)
					}
				})
			},
			async getLogin(Logincode) {
				console.log(Logincode);
				var _this = this
				let {
					code,
					message,
					data
				} = await this.$com.fetch('login/user_login', {
					code: Logincode ? Logincode : '',
					phonecode: '',
					usercode: _this.usercode,
					phone: _this.phone,
					password: _this.password,
					type: _this.type,
				});
				var timeOut = 1000;
				if (code == 200) {
					var token = data._token_; //组件登录成功后 获取 用户唯一的token
					var user_info = data.user_info; //组件登录成功后 获取 用户唯一的token
					var user_id = data.user_info.id; //组件登录成功后 获取 用户唯一的token
					//这两个写入本地缓存的的方法 第一个是异步 第二个是同步
					// uni.getStorage({});
					if (user_info.type.includes('3') && _this.type == 3) {
						uni.setStorage({
							key: 'user_type',
							data: 3
						})
					} else if (user_info.type.includes('2') && _this.type == 2) {
						uni.setStorage({
							key: 'user_type',
							data: 2
						})
					} else {
						uni.setStorage({
							key: 'user_type',
							data: 1
						})
					}

					uni.setStorage({
						key: 'user_id',
						data: user_id
					})
					uni.setStorage({
						key: 'token',
						data: token,
						success(res) {
							uni.showToast({
								icon: 'none',
								title: '登陆成功！'
							});
							if (user_info.type.includes('2') && _this.type == 2) {
								setTimeout(function() {
									//这个跳转表示的事 你设置了 底部菜单栏的时候 当前地址属于底部菜单栏的时候
									//我们用这个
									uni.redirectTo({
										url: '/pages/store/index'
									});
									//其他类型页面地址用如下
									// uni.navigateTo({

									// })
								}, timeOut)
							} else {
								setTimeout(function() {
									//这个跳转表示的事 你设置了 底部菜单栏的时候 当前地址属于底部菜单栏的时候
									//我们用这个
									uni.switchTab({
										url: '/pages/user/index'
									});
									//其他类型页面地址用如下
									// uni.navigateTo({

									// })
								}, timeOut)
							}

						},
						fail(res) {
							uni.showToast({
								icon: 'none',
								title: '登录失败，请重试！'
							})
						}
					})

					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token',token);

				} else {
					//接下来我们来测试下
					//这里我处理接口返回的 code 不是200
					uni.showToast({
						icon: 'none',
						title: message
					})
				}

			},
			getPhoneNumber(e) {
				if (!this.agree) {
					uni.showToast({
						title: "请阅读并同意用户协议与隐私政策！",
						icon: "none"
					})
					return
				}
				console.log(e);
				let phone_code = e.detail.code
				console.log(e.detail.errMsg);
				// 参数e是绑定的授权方法自动传入过来的, 
				//主要是为了拿到vi和encryptedData值从后台换取用户联系方式
				if ("getPhoneNumber:ok" != e.detail.errMsg) {
					wx.showToast({
						icon: 'none',
						title: '快捷登陆失败'
					})
					return;
				} else {
					this._wxLogin(phone_code)
				}

			},
			async _wxLogin(phone_code) {
				// console.log(phone_code)
				var _this = this
				console.log(_this.type);

				var res = await this.$com._wxLogin(phone_code, _this.type, _this.usercode, 'login/user_login');
				// this.$refs.sonMethod._wxLogin();
				var timeOut = 1000; //1S
				//todo....
				//这里处理获取token后存储token的操作
				//这个回调变量code == 200 表示 接口操作成功 如不是200 的话 操作失败
				if (res.code == 200) {
					var token = res.data._token_; //组件登录成功后 获取 用户唯一的token
					var user_info = res.data.user_info; //组件登录成功后 获取 用户唯一的token
					var user_id = res.data.user_info.id; //组件登录成功后 获取 用户唯一的token
					//这两个写入本地缓存的的方法 第一个是异步 第二个是同步
					// uni.getStorage({});
					if (user_info.type.includes('3') && _this.type == 3) {
						uni.setStorage({
							key: 'user_type',
							data: 3
						})
					} else if (user_info.type.includes('2') && _this.type == 2) {
						uni.setStorage({
							key: 'user_type',
							data: 2
						})
					} else {
						uni.setStorage({
							key: 'user_type',
							data: 1
						})
					}
					uni.setStorage({
						key: 'user_id',
						data: user_id
					})
					uni.setStorage({
						key: 'token',
						data: token,
						success(res) {
							uni.showToast({
								icon: 'none',
								title: '登陆成功！'
							});
							if (user_info.type.includes('2') && _this.type == 2) {
								setTimeout(function() {
									//这个跳转表示的事 你设置了 底部菜单栏的时候 当前地址属于底部菜单栏的时候
									//我们用这个
									uni.redirectTo({
										url: '/pages/store/index'
									});
									//其他类型页面地址用如下
									// uni.navigateTo({

									// })
								}, timeOut)
							} else {
								setTimeout(function() {
									//这个跳转表示的事 你设置了 底部菜单栏的时候 当前地址属于底部菜单栏的时候
									//我们用这个
									uni.switchTab({
										url: '/pages/user/index'
									});
									//其他类型页面地址用如下
									// uni.navigateTo({

									// })
								}, timeOut)
							}

						},
						fail(res) {

							uni.showToast({
								icon: 'none',
								title: '登录失败，请重试！'
							})
						}
					})

					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token',token);

				} else {
					//接下来我们来测试下
					//这里我处理接口返回的 code 不是200
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}

			},
			handleinput() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (!this.password) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (!this.agree) {
					uni.showToast({
						title: "请阅读并同意用户协议与隐私政策！",
						icon: "none"
					})
					return
				} else {

					this.getlo();
					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token', token);
				}
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="less">
	.WeChat_image {
		text-align: center;
		border: none;
		background-color: #ffffff;
		border-radius: 50%;
		margin: auto;
		margin-top: 40rpx;

		&::after {
			border: none;
		}
	}
</style>